<template>
  <el-dialog class="h5-dialog" top="0" :title="config.title ?? '提示'" :visible.sync="visible" append-to-body :show-close="false" :center="true">
    <div class="dialog-content">{{ config.message }}</div>
    <div slot="footer" class="dialog-footer">
      <div class="btn" @click="onCancel">{{ config.cancelText ?? "取消" }}</div>
      <div class="btn" @click="onConfirm">{{ config.confirmText ?? "确定" }}</div>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: "toast",
  data() {
    return {
      visible: false,
      config: {
        title: "",
        message: "",
      },
    };
  },
  methods: {
    async open() {
      if (this.visible) {
        return;
      }
      this.visible = true;
    },
    onCancel() {
      this.visible = false;
      this.$emit("cancel");
    },
    onConfirm() {
      this.visible = false;
      this.$emit("confirm");
    },
  },
};
</script>
<style lang="scss" scoped>
.h5-dialog {
  .el-dialog {
    width: calc(100% - 120px);
    top: 40%;
    transform: translateY(-50%);
    margin-bottom: env(safe-area-inset-bottom);
    background-color: #fff;
    border-radius: 12px;
    overflow: hidden;

    .el-dialog__header {
      padding: 16px 24px;
      border: 0;

      .el-dialog__title {
        font-size: 16px;
        color: #333;
      }
    }

    .el-dialog__body {
      padding: 0;
    }

    .el-dialog__footer {
      padding: 0;
      border: 0;
    }
  }

  .dialog-content {
    padding: 0px 24px 16px;
    font-size: 16px;
  }

  .dialog-footer {
    display: flex;
    border-top: 1px solid #d9d9d9;
    align-items: center;

    .btn {
      flex: 1;
      line-height: 54px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      color: #333;
      font-weight: 500;

      & + .btn {
        border-left: 1px solid #d9d9d9;
        color: #246fff;
      }

      &:active {
        background-color: #f7f7f7;
      }
    }
  }
}
</style>
